<template>
	<view class="index-container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<uv-search placeholder="请输入搜索内容" shape="square" animation="false" v-model="searchKeyword"></uv-search>
		</view>
		<!-- swiper banner -->
		<view class="swiper-wrapper">
			<swiper
				class="swiper"
				indicator-dots="true"
				autoplay="true"
				interval="3000"
				duration="500"
				indicator-color="rgba(255, 255, 255, .3)"
				indicator-active-color="#fff"
				circle
			>
				<swiper-item v-for="item in swiperList" :key="item.id">
					<image :src="item.url" mode="aspectFill" class="swiper-image"></image>
					<view class="swiper-text">
						<view class="swiper-title">{{ item.title }}</view>
						<view class="swiper-subtitle">{{ item.subtitle }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 功能列表 -->
		<view class="function-wrapper">
			<view v-for="item in functionList" :key="item.id" class="function-item">
				<view class="function-icon">
					<image :src="item.icon" mode="aspectFill"></image>
				</view>
				<view class="function-name">{{ item.name }}</view>
			</view>
		</view>

		<!-- 新闻列表 -->
		<view class="news-wrapper">
			<view class="news-wrapper-title">
				<view class="title">旅游资讯</view>
				<view class="more">查看全部 <uv-icon name="arrow-right" size="12" color="#2b6de5" top="1"></uv-icon></view>
			</view>
			<scroll-view scroll-x>
				<view class="news-list">
					<view v-for="item in 3" :key="item.id" class="news-item" @click="toPost">
						<image src="@/static/fengjing1.png" mode="aspectFill"></image>
						<view class="news-title"> 日本樱花季提前预测发布 </view>
						<view class="news-time"> 环球旅讯 · 2小时前 </view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 热门路线 -->
		<view class="route-wrapper">
			<view class="route-wrapper-title">
				<view class="title">热门路线</view>
				<view class="more">查看全部 <uv-icon name="arrow-right" size="12" color="#2b6de5" top="1"></uv-icon></view>
			</view>
			<view class="route-list">
				<view class="route-item" v-for="item in travelList" :key="item.id" @click="toRoute(item)">
					<image :src="item.route[0].image" mode="scaleToFill" />
					<view class="route-info">
						<view class="route-title">{{ item.title }}</view>
						<view class="route-description"> {{ item.description }} </view>
						<view class="route-detail">
							<view class="route-point">
								<image src="@/static/icon/site.png" class="icon" />
								{{ item.destination }}
							</view>
							<view class="route-point">
								<image src="@/static/icon/calendar.png" class="icon" />
								{{ item.day }}天
							</view>
							<view class="route-point">
								<image src="@/static/icon/walk.png" class="icon" />
								{{ item.member }}人
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- Tabbar -->
		<Tabbar :active="0"></Tabbar>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {
			searchKeyword: '',
			swiperList: [
				{
					id: 0,
					url: require('@/static/fengjing1.png'),
					title: '探索世界的美好',
					subtitle: 'AI智能规划，定制专属旅程'
				},
				{
					id: 1,
					url: require('@/static/fengjing2.png'),
					title: '探索世界的美好',
					subtitle: 'AI智能规划，定制专属旅程'
				},
				{
					id: 2,
					url: require('@/static/fengjing3.png'),
					title: '探索世界的美好',
					subtitle: 'AI智能规划，定制专属旅程'
				}
			],
			functionList: [
				{
					id: 0,
					icon: require('@/static/icon/ticket.png'),
					name: '景点门票'
				},
				{
					id: 1,
					icon: require('@/static/icon/star-ticket.png'),
					name: '当地玩乐'
				},
				{
					id: 2,
					icon: require('@/static/icon/food.png'),
					name: '美食推荐'
				},
				{
					id: 3,
					icon: require('@/static/icon/bus.png'),
					name: '交通出行'
				},
				{
					id: 4,
					icon: require('@/static/icon/bed.png'),
					name: '酒店住宿'
				},
				{
					id: 5,
					icon: require('@/static/icon/route.png'),
					name: '定制路线'
				},
				{
					id: 6,
					icon: require('@/static/icon/global.png'),
					name: '旅游攻略'
				},
				{
					id: 7,
					icon: require('@/static/icon/location.png'),
					name: '特色体验'
				}
			],
			travelList: []
		};
	},
	onShow() {
		this.handleGetTravelList();
	},
	methods: {
		toPost() {
			uni.navigateTo({ url: '/pages/post/post' });
		},
		toRoute(route) {
			uni.navigateTo({ url: '/pages/route/route?id=' + route.id });
		},
		async handleGetTravelList() {
			const res = await request(`/travel/getMyTravelList?userId=1`);
			this.travelList = res.data.data.filter((item) => !item.others).filter((item, index) => index < 4);
		}
	}
};
</script>

<style lang="scss">
.index-container {
	padding: 20rpx;

	.search-bar {
		margin-bottom: 20rpx;
	}

	.swiper-wrapper {
		margin-bottom: 40rpx;

		.swiper {
			border-radius: 25rpx;
			overflow: hidden;
			height: 320rpx;

			//指示点位置，支持微信小程序
			& /deep/ .wx-swiper-dots-horizontal {
				left: 630rpx;
			}

			.swiper-image {
				width: 100%;
				height: 100%;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
					z-index: 2;
				}
			}

			.swiper-text {
				position: absolute;
				bottom: 30rpx;
				left: 30rpx;
				color: #fff;
				z-index: 2;
				letter-spacing: 1rpx;

				.swiper-title {
					font-size: 36rpx;
					margin-bottom: 10rpx;
				}

				.swiper-subtitle {
					font-size: 28rpx;
					opacity: 0.9;
				}
			}
		}
	}

	.function-wrapper {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx 20rpx;
		margin: 20rpx 0;

		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.function-icon {
				border-radius: 100%;
				width: 100rpx;
				height: 100rpx;
				background-color: $theme-color-bg;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.function-name {
				font-size: 22rpx;
				color: #333;
			}
		}
	}

	.news-wrapper {
		display: flex;
		flex-direction: column;
		margin: 40rpx 0;
		padding: 0 10rpx;

		.news-wrapper-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.more {
				display: flex;
				align-items: center;
				gap: 5rpx;
				font-size: 24rpx;
				color: $theme-color;
			}
		}

		.news-list {
			display: flex;
			gap: 20rpx;
			overflow-x: scroll;
			width: max-content;

			.news-item {
				width: 500rpx;
				display: flex;
				flex-direction: column;
				gap: 10rpx;

				image {
					width: 100%;
					height: 300rpx;
					margin-bottom: 10rpx;
					border-radius: 25rpx;
				}

				.news-title {
					font-size: 32rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.news-time {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}

	.route-wrapper {
		display: flex;
		flex-direction: column;
		margin: 40rpx 0;
		padding: 0 10rpx;

		.route-wrapper-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.more {
				display: flex;
				align-items: center;
				gap: 5rpx;
				font-size: 24rpx;
				color: $theme-color;
			}
		}

		.route-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;

			.route-item {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				background-color: #f9fafb;

				image {
					width: 100%;
					height: 250rpx;
					border-top-left-radius: 25rpx;
					border-top-right-radius: 25rpx;
					object-fit: cover;
				}

				.route-info {
					max-width: 300rpx;
					padding: 10rpx;
					border-radius: 25rpx;
					display: flex;
					flex-direction: column;
					padding: 20rpx;
					gap: 10rpx;

					.route-title {
						font-size: 32rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.route-description {
						font-size: 28rpx;
						color: #999;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 限制文本显示的行数 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
					}

					.route-detail {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.route-point {
							display: flex;
							align-items: center;
							gap: 10rpx;
							font-size: 24rpx;
							color: #333;

							.icon {
								width: 28rpx;
								height: 28rpx;
							}
						}

						.route-price {
							font-size: 28rpx;
							color: #ff6b2d;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
}
</style>
